<template>
    <span>
        <!-- {{ iconName }} -->
        <img :src="getImg(iconName)" style="width: 14px; height: 14px; display: inline-block; margin-right: 6px; vertical-align: middle" />
        <!-- <component :is="iconType" :type="iconName" :color="iconColor" :size="iconSize" /> -->
    </span>
</template>

<script>
import Icons from '_c/icons'
export default {
    name: 'CommonIcon',
    components: {Icons},
    props: {
        type: {
            type: String,
            required: true
        },
        color: String,
        size: Number,
        name: String
    },
    computed: {
        iconType() {
            return this.type.indexOf('_') === 0 ? 'Icons' : 'Icon'
        },
        iconName() {
            return this.iconType === 'Icons' ? this.getCustomIconName(this.type) : this.type
        },
        iconSize() {
            return this.size || (this.iconType === 'Icons' ? 12 : undefined)
        },
        iconColor() {
            return this.color || ''
        },
        iconName() {
            return this.name || ''
        }
    },
    methods: {
        getImg(name) {
            if (name) {
                return require(`@/assets/images/menuIcon/${name}.png`)
            }
        },
        getCustomIconName(iconName) {
            return iconName.slice(1)
        }
    }
}
</script>

<style>
</style>
